<template>
    <div>
      <el-table :data="mergedList" border style="width: 100%" class="center-table">
        <el-table-column prop="name" label="名称" align="center" width="300px" />
        <el-table-column prop="type" label="类型" align="center" width="300px">
          <template #default="scope">
            <span class="ellipsis" :title="scope.row.type">
              <span v-if="scope.row.type === 'pro'">普通用户</span>
              <span v-else>管理员</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              size="mini"
              @click="openEditDialog(scope.row)"
              v-if="userRole === 'admin'"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 编辑弹出层 -->
      <el-dialog
        :visible.sync="editDialogVisible"
        title="编辑信息"
        width="480px"
        class="light-edit-dialog"
        :close-on-click-modal="false"
        :close-on-press-escape="true"
        append-to-body
      >
        <div class="edit-content">
          <el-form :model="editForm" label-width="100px" class="light-edit-form">
            <el-form-item label="用户名称">
              <el-input v-model="editForm.userName" />
            </el-form-item>
            <el-form-item label="角色类型">
              <el-select v-model="editForm.roleType" placeholder="请选择角色类型">
                <el-option
                  v-for="option in roleTypeOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false" class="dark-btn">取消</el-button>
          <el-button type="primary" @click="submitEdit" class="dark-btn">保存</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { mapState } from "vuex";
  import {
    usergetToolList,
    userRoleTargetList,
    RoleupdategetList,
    userRoleupdategetList
  } from "@/api/user/manage.js";
  
  export default {
    data() {
      return {
        userList: [],
        sysRole: [],
        mergedList: [],
        editDialogVisible: false,
        editForm: {
          userName: "",
          roleType: "",
        },
        roleTypeOptions: [
          { label: "管理员", value: "admin" },
          { label: "普通用户", value: "pro" },
        ],
        userId:"",
      };
    },
    computed: {
      ...mapState(["userRole"])
    },
    mounted() {
      this.fetchData();
    },
    methods: {
        async userRoleupdateget() {
      try {
        const userName = this.editForm.userName; // 单独传递 userName
        const roleType = this.editForm.roleType; // 单独传递 roleType
        console.log("提交编辑数据:", { roleType,userName });

        const response = await userRoleupdategetList({ roleType, userName}); // 分开传递参数
         console.log("接口123213213响应:", response);
         this.id = response
         console.log("获取的 ID:213213213", this.id);
      } catch (error) {
        console.error("获取数据失败:", error);
        this.$message.error("数据更新失败，请稍后再试");
      }
    },
      // 通用数据提取函数，兼容 { data: [...] } 或直接返回数组
      extractArray(response) {
        if (Array.isArray(response)) return response;
        if (response && Array.isArray(response.data)) return response.data;
        return [];
      },
  
      async fetchData() {
        try {
          const userResponse = await usergetToolList();
          const userArr = this.extractArray(userResponse);
          console.log("用户列表接口返回数据:213213", userResponse);
  
          if (userArr.length) {
            this.userList = userArr;
            const userIds = this.userList.map((item) => item.id).join(",");
            this.userId = userIds; // 保存用户 ID 列表
            
            console.log("用户 ID 列表:", userIds);
  
            const roleResponse = await userRoleTargetList({ userIds });
            const roleArr = this.extractArray(roleResponse);
  
            if (roleArr.length) {
              this.sysRole = roleArr;
              this.mergeLists();
            } else {
              console.error("角色列表接口返回数据为空或格式不正确", roleResponse);
            }
          } else {
            console.error("用户列表接口返回数据为空或格式不正确", userResponse);
          }
        } catch (error) {
          console.error("获取数据失败:", error);
        }
      },
  
      mergeLists() {
        this.mergedList = this.userList.map((user, index) => ({
          name: user.name,
          type: this.sysRole[index] || "无类型",
          index:index++,
        }));
        console.log("合并后的列表:", this.mergedList);
      },
  
      openEditDialog(row) {
        this.editForm.userName = row.name;
        this.editForm.roleType = row.type;
        this.editDialogVisible = true;
        this.userRoleupdateget()
      },
  
      async submitEdit() {
        try {
          const roleType = String(this.editForm.roleType).trim();
          const userId = Number((this.id || "").toString().trim());
          console.log("用户2132213 ID:", userId, roleType);

          if (!roleType || !userId) {
            this.$message.error("角色类型、ID 或用户名不能为空");
            console.error("提交失败: 参数缺失或格式错误", { roleType, userId });
            return;
          }

          const response = await RoleupdategetList({roleType,userId});
          console.log("编辑成功:", response);

          this.$message.success("编辑成功");
          this.editDialogVisible = false;
          await this.fetchData(); // 保存后刷新列表
        } catch (error) {
          console.error("编辑失败:", error.response?.data || error);
          this.$message.error("编辑失败，请稍后再试");
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .center-table .el-table__cell {
    text-align: center;
  }
  .dialog-footer {
    text-align: right;
  }
  .center-table {
    background: #23272f !important;
    border-radius: 10px !important;
    color: #f3f6fa !important;
    box-shadow: 0 2px 12px #409eff22;
  }
  .center-table ::v-deep .el-table__header,
  .center-table ::v-deep .el-table__body {
    background: #23272f !important;
    color: #8ecfff !important;
  }
  .center-table ::v-deep th,
  .center-table ::v-deep td {
    background: #23272f !important;
    color: #f3f6fa !important;
    border-bottom: 1px solid #35363a !important;
  }
  .center-table ::v-deep .el-table__row:hover > td {
    background: #35363a !important;
    color: #53caff !important;
  }
  .center-table ::v-deep .el-table__body tr.current-row > td {
    background: #232526 !important;
    color: #53caff !important;
  }
  .center-table ::v-deep .el-table__body-wrapper {
    border-radius: 10px !important;
  }
  .center-table ::v-deep .el-table__column-resize {
    background: #409eff !important;
  }
  .center-table ::v-deep .el-table__row .el-checkbox__input.is-checked .el-checkbox__inner {
    background: #409eff !important;
    border-color: #53caff !important;
  }
  .center-table ::v-deep .el-checkbox__inner {
    background: #23272f !important;
    border: 1.5px solid #409eff !important;
  }
  .center-table ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after {
    border-color: #fff !important;
  }

  /* 暗黑风格编辑弹窗 */
.dark-edit-dialog ::v-deep .el-dialog__header,
.dark-edit-dialog ::v-deep .el-dialog__body,
.dark-edit-dialog ::v-deep .el-dialog__footer {
  background: #232526 !important;
  color: #f3f6fa !important;
  border-radius: 14px;
  border: 1.5px solid #409eff;
}
.dark-edit-dialog ::v-deep .el-dialog {
  border-radius: 14px;
  border: 1.5px solid #409eff;
  background: #232526 !important;
}
.dark-edit-dialog ::v-deep .el-dialog__title {
  color: #8ecfff !important;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
}
.edit-content {
  padding: 18px 8px 8px 8px;
  background: #23272f;
  border-radius: 10px;
  color: #f3f6fa;
  box-shadow: 0 1px 8px #409eff11;
}
.dark-edit-form ::v-deep .el-form-item__label {
  color: #8ecfff !important;
}
.dark-edit-form ::v-deep .el-input__inner,
.dark-edit-form ::v-deep .el-select .el-input__inner {
  background: #23272f !important;
  color: #fff !important;
  border: 1px solid #35363a !important;
}
.dark-edit-form ::v-deep .el-input__inner:focus,
.dark-edit-form ::v-deep .el-select .el-input__inner:focus {
  border-color: #409eff !important;
  background: #23272f !important;
}
.dark-btn {
  background: linear-gradient(90deg, #409eff 60%, #53caff 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 22px;
  transition: background 0.18s, box-shadow 0.18s;
}
.dark-btn:hover {
  background: linear-gradient(90deg, #53caff 60%, #409eff 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px #53caff44;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
.center-table .el-table__cell {
  text-align: center;
}
.center-table {
  background: #f8fafc !important;
  border-radius: 10px !important;
  color: #232526 !important;
  box-shadow: 0 2px 12px #b3c6e822;
}
.center-table ::v-deep .el-table__header,
.center-table ::v-deep .el-table__body {
  background: #f8fafc !important;
  color: #409eff !important;
}
.center-table ::v-deep th,
.center-table ::v-deep td {
  background: #f8fafc !important;
  color: #232526 !important;
  border-bottom: 1px solid #b3c6e8 !important;
}
.center-table ::v-deep .el-table__row:hover > td {
  background: #e9f0fb !important;
  color: #409eff !important;
}
.center-table ::v-deep .el-table__body tr.current-row > td {
  background: #e9f0fb !important;
  color: #409eff !important;
}
.center-table ::v-deep .el-table__body-wrapper {
  border-radius: 10px !important;
}
.center-table ::v-deep .el-table__column-resize {
  background: #409eff !important;
}
.center-table ::v-deep .el-table__row .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #409eff !important;
  border-color: #53caff !important;
}
.center-table ::v-deep .el-checkbox__inner {
  background: #f8fafc !important;
  border: 1.5px solid #409eff !important;
}
.center-table ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after {
  border-color: #fff !important;
}
.dark-detail-dialog ::v-deep .el-dialog__header,
.dark-detail-dialog ::v-deep .el-dialog__body,
.dark-detail-dialog ::v-deep .el-dialog__footer {
  background: #f8fafc !important;
  color: #232526 !important;
  border-radius: 14px;
  border: 1.5px solid #b3c6e8;
}
.dark-detail-dialog ::v-deep .el-dialog {
  border-radius: 14px;
  border: 1.5px solid #b3c6e8;
  background: #f8fafc !important;
}
.dark-detail-dialog ::v-deep .el-dialog__title {
  color: #409eff !important;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
}
.detail-content {
  padding: 18px 8px 8px 8px;
  background: #fff;
  border-radius: 10px;
  color: #232526;
  box-shadow: 0 1px 8px #b3c6e822;
}
.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.detail-label {
  min-width: 90px;
  color: #409eff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
}
.detail-value {
  color: #232526;
  font-size: 15px;
  word-break: break-all;
}
.dark-btn {
  background: linear-gradient(90deg, #409eff 60%, #53caff 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 22px;
  transition: background 0.18s, box-shadow 0.18s;
}
.dark-btn:hover {
  background: linear-gradient(90deg, #53caff 60%, #409eff 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px #b3c6e822;
}

/* 新增浅色风格弹窗样式 */
.light-edit-dialog ::v-deep .el-dialog__header,
.light-edit-dialog ::v-deep .el-dialog__body,
.light-edit-dialog ::v-deep .el-dialog__footer {
  background: #f8fafc !important;
  color: #232526 !important;
  border-radius: 14px;
  border: 1.5px solid #b3c6e8;
}
.light-edit-dialog ::v-deep .el-dialog {
  border-radius: 14px;
  border: 1.5px solid #b3c6e8;
  background: #f8fafc !important;
}
.light-edit-dialog ::v-deep .el-dialog__title {
  color: #409eff !important;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
}
.light-edit-form ::v-deep .el-form-item__label {
  color: #409eff !important;
}
.light-edit-form ::v-deep .el-input__inner,
.light-edit-form ::v-deep .el-select .el-input__inner {
  background: #fff !important;
  color: #232526 !important;
  border: 1px solid #b3c6e8 !important;
}
.light-edit-form ::v-deep .el-input__inner:focus,
.light-edit-form ::v-deep .el-select .el-input__inner:focus {
  border-color: #409eff !important;
  background: #f3f6fa !important;
}
.edit-content {
  padding: 18px 8px 8px 8px;
  background: #fff;
  border-radius: 10px;
  color: #232526;
  box-shadow: 0 1px 8px #b3c6e822;
}
  </style>
